<template>
  <v-chart
    :theme="theme"
    :loading="loading"
    :loadingOptions="loadingOptions"
    :initOptions="initOptions"
    :options="config"
    v-on="$listeners"
    ref="progress"
  />
</template>
<script>
import VChart from '../../Core'

import { summate } from '../../../utils'
import { titleTextStyle, pieLabel } from '../../itemDefaultConfig'

export default {
  name: 'ProgessChart',
  components: {
    VChart,
  },
  props: {
    showTitle: {
      type: Boolean,
      default: false,
    },
    loadingOptions: Object, // loading 状态配置项
    loading: {
      type: Boolean,
      default: false,
    },
    radius: {
      type: [String, Array],
      default: function() {
        return ['25%', '40%']
      }, // [内半径, 外半径]
    },
    center: {
      type: Array,
      default: function() {
        return ['25%', '50%']
      }, // [x, y]
    },
    initOptions: Object,
    options: {
      type: Object,
      default: function() {
        return {}
      },
    },
    theme: {
      type: [String, Object],
      default: 'xm',
    },
  },

  computed: {
    config() {
      const { title, legend, tooltip, series, ...otherConfig } = this.options

      const option = {
        title,
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c}',
          ...tooltip,
        },
        legend: {
          show: false,
        },

        series: (series || []).map(item => ({
          type: 'pie',
          label: { show: true, position: 'center', ...pieLabel },
          radius: this.radius,
          center: this.center,
          hoverAnimation: false,
          emphasis: false,
          ...item,
        })),
        ...otherConfig,
      }

      return option
    },
  },

  methods: {
    getEchartsInstance() {
      return this.$refs.progress.chart
    },
  },
}
</script>
